<template>
	<scroll-view class="integral-list" scroll-y @scrolltolower="$emit('loadMore')" @refresherrefresh="$emit('refresh')"
		:refresher-enabled="true" :refresher-triggered="loading">
		<view class="integral-list">
			<view class="bill-item" v-for="(item, index) in list" :key="index">
				<image class="bill-icon" :src="item.icon" mode="aspectFit"></image>
				<view class="bill-box">
					<view class="bill-info">
						<view class="bill-name">{{ item.name }}</view>
						<text class="bill-time">{{ item.time }}</text>
					</view>
					<view class="bill-info">
						<text class="bill-amount">{{ item.amount }} <text>积分</text> </text>
						<text class="bill-type">{{ item.type }}</text>
					</view>

				</view>
			</view>
		</view>

		<view class="loading-text" v-if="loading">加载中...</view>
		<view class="no-more" v-if="!hasMore && !loading">没有更多了</view>
	</scroll-view>
</template>

<script lang="ts">
	import { Vue, Component, Prop } from 'vue-property-decorator'

	interface IntegralItem {
		 [key: string]: any
	}

	@Component
	export default class IntegralList extends Vue {
		@Prop({ required: true }) list! : IntegralItem[]
		@Prop({ default: false }) loading! : boolean
		@Prop({ default: true }) hasMore! : boolean
	}
</script>

<style lang="scss" scoped>
	.integral-list {
		.bill-item {
			display: flex;
			align-items: center;
			padding: 0rpx 26rpx;
			background-color: #fff;
			// border-bottom: 1px solid #f5f5f5;

			.bill-icon {
				width: 84rpx;
				height: 84rpx;
				border-radius: 4px;
			}

			.bill-box {
				flex: 1;
				display: flex;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 26rpx;
				margin-left: 12px;
				padding-top: 18rpx;
			}

			.bill-info {
				flex: 2;

				// margin-left: 12px;
				&:last-child {
					flex: 1;
					text-align: right;
					align-items: end;
					justify-items: self-end;

					.bill-amount {
						font-size: 30rpx;
						color: #000000;

						text {
							font-size: 34rpx;
							margin-left: 6rpx;
						}
					}
				}

				.bill-name {
					font-size: 34rpx;
					color: #000000;

					width: 380rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的部分 */
					text-overflow: ellipsis;
				}

				.bill-time {
					font-size: 24rpx;
					color: #afafaf;
					margin-top: 4px;
					display: block;
				}

				.bill-type {
					font-size: 24rpx;
					color: #43D534;
					margin-top: 4px;
					display: block;
				}
			}

			.bill-amount {
				font-size: 34rpx;
				color: #000000;

			}
		}
	}

	.loading-text,
	.no-more {
		text-align: center;
		padding: 16px;
		color: #999;
		font-size: 14px;
	}
</style>